import React, { useEffect, useState } from 'react';
import * as Icons from '@ant-design/icons';
import styles from "./index.module.scss"
import Back_admin from '@/guard/Back';
import {
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    SunOutlined,
    MoonOutlined
} from '@ant-design/icons';
import { HappyProvider } from '@ant-design/happy-work-theme';
import { Layout, Menu, theme, Button, ConfigProvider, Switch, Avatar, Popover, Space, Modal, Form, Input, message } from 'antd';
import { useSelector, useDispatch } from 'react-redux'
import { setTheme } from "@/store/Appstore/RootStore"
import { updatepass } from "@/apis/admin/admin"
import { Outlet, useNavigate, useLocation } from "react-router-dom"
import locale from 'antd/locale/zh_CN';
import { GoOut } from "@/store/AdminStore"
const base_url = import.meta.env.VITE_APP_URL
const { Header, Content, Sider } = Layout;
const ICONFONT = (props: any) => {
    const { icon } = props
    //@ts-ignore
    return React.createElement(Icons[icon])
}
const Back = () => {
    const [form] = Form.useForm()
    const location = useLocation().pathname
    const navigate = useNavigate()
    const dispatcch = useDispatch()
    const [Enums, setenum] = useState<any>()
    const AdminInfo = useSelector((state: any) => state.AdminStore.AdminInfo)
    const [isModalOpen, setIsModalOpen] = useState(false);
    const onChange = (_: boolean) => {
        dispatcch(setTheme())
    }
    const thems = useSelector((state: any) => state.Appstore.theme)
    const [collapsed, setCollapsed] = useState(false);
    const chooose = (e: any) => {
        navigate('/backstage/' + e.key)
    }
    useEffect(() => {
        let items = JSON.parse(JSON.stringify(AdminInfo.pression))
        items.map((item: any) => {
            item.icon = item.icon && <ICONFONT icon={item.icon}></ICONFONT>
        })
        setenum([...items])
    }, [])
    //退出
    const goOut = () => {
        dispatcch(GoOut())
    }
    const showadmin = () => {
        setIsModalOpen(true);
    }

    const handleOk = async () => {
        const oldpass = form.getFieldValue("oldpassword")
        const password = form.getFieldValue("password")
        const res = await updatepass({ oldpass, password })
        if (res.status === 200) {
            message.success("修改成功")
            dispatcch(GoOut())
        }
    };

    const handleCancel = () => {
        setIsModalOpen(false);
    };
    return (
        <Back_admin>
            <ConfigProvider
                locale={locale}
                theme={{
                    algorithm: thems ? theme.defaultAlgorithm : theme.darkAlgorithm,
                }}
            >
                <Layout style={{ minHeight: '100vh', color: thems ? "rgba(20,20,20,1)" : 'white' }}>
                    <Sider style={{ background: thems ? 'white' : "rgba(20,20,20,1)" }} collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
                        <div style={{ textAlign: 'center', padding: "10px 0", color: thems ? "rgba(20,20,20,1)" : 'white' }}>后台管理</div>
                        <Menu selectedKeys={[location.split('/')[2]]} mode="inline" items={Enums} onClick={chooose} />
                    </Sider>
                    <Layout>
                        <Header style={{ background: thems ? 'white' : "rgba(20,20,20,1)", display: 'flex', justifyContent: "space-between" }} >
                            <div style={{ display: "flex", alignItems: 'center' }}>
                                <Button
                                    type="text"
                                    icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                                    onClick={() => setCollapsed(!collapsed)}
                                    style={{
                                        fontSize: '16px',
                                        width: 60,
                                        height: 60,
                                    }}
                                />
                                <HappyProvider>
                                    <Switch checkedChildren={<SunOutlined />} unCheckedChildren={<MoonOutlined />} defaultChecked={thems} onChange={onChange} />

                                </HappyProvider>
                            </div>
                            <div style={{ marginRight: "50px" }} >
                                <Popover
                                    content={
                                        <Space className={styles.tiphover} size={"small"} direction="vertical">
                                            <p onClick={showadmin}>信息</p>
                                            <p onClick={goOut}>退出</p>
                                        </Space>

                                    }
                                >
                                    <Avatar

                                        size={'large'} src={base_url + AdminInfo.user.avatar}></Avatar>

                                </Popover>
                            </div>
                        </Header>
                        <Content style={{ margin: '5px 16px', }}>
                            <Outlet></Outlet>
                        </Content>

                    </Layout>
                </Layout>
                <Modal title="信息" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                    <p style={{ marginBottom: "10px" }}>用户名：{AdminInfo.user.username}</p>
                    <Form form={form}  >
                        <Form.Item label="旧密码" name="oldpassword">
                            <Input.Password autoComplete={"off"} placeholder="请输入旧密码" />
                        </Form.Item>
                        <Form.Item label="新密码" name="password">
                            <Input.Password autoComplete="off" placeholder="请输入新密码" />
                        </Form.Item>
                    </Form>

                </Modal>
            </ConfigProvider>
        </Back_admin>


    );
};

export default Back;